<template>
  <view class="resetPassword">
    <view class="head">
      <image src="../../static/images/BackIcon.png" mode="scaleToFill" />
    </view>
    <view class="content">
      <view class="title">重置密码</view>
      <view class="content-item">
        <view class="ipt">
          <span style="color: aliceblue; padding-left: 32rpx">手机号码</span>
          <input
            type="number"
            placeholder="请输入手机号"
            placeholder-style="color:#666"
            v-model="params.phone"
            :maxlength="11"
          />
        </view>
        <view class="ipt">
          <span style="color: aliceblue; padding-left: 32rpx">验证码</span>

          <view class="security">
            <input
              type="number"
              placeholder="请输入验证码"
              placeholder-style="color:#666"
              v-model="params.security"
              :maxlength="6"
            />
            <view
              class="code"
              @click="getCode"
              :class="{ disabled: !isPhoneValid || isDisabled }"
              :style="{
                color: isPhoneValid && !isDisabled ? '#1A195A' : '#ccc',
              }"
              >| {{ buttonText }}</view
            >
          </view>
        </view>
        <view class="ipt">
          <span style="color: aliceblue; padding-left: 32rpx">新密码</span>
          <input
            type="number"
            placeholder="请输入设置8~12位密码"
            placeholder-style="color:#666"
            v-model="params.newPassword"
            :maxlength="11"
          />
        </view>
        <view class="ipt">
          <span style="color: aliceblue; padding-left: 32rpx">确认密码</span>
          <input
            type="number"
            placeholder="请输入设置8~12位密码"
            placeholder-style="color:#666"
            v-model="params.confirmPassword"
            :maxlength="11"
          />
        </view>
        <button class="login" click="handleResetPassword">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref ,computed} from "vue";
import { apiResetPassword } from "../../api/login";
//调用重置接口
const handleResetPassword = async () => {
  const resetRes = await apiResetPassword({
    userId: params.value.phone,
    newPsw: params.value.newPassword,
  });
};
const params = ref({
  phone: "",
  security: "",
  newPassword: "",
  confirmPassword: "",
});
//验证码获取
const isDisabled = ref(false);
const buttonText = ref("获取验证码");
const getCode = () => {
  // 发送验证码的逻辑
  console.log("发送验证码");

  // 模拟发送验证码后的倒计时
  let count = 60;
  const timer = setInterval(() => {
    if (count > 0) {
      buttonText.value = `${count}秒重新获取`;
      count--;
    } else {
      clearInterval(timer);
      buttonText.value = "获取验证码";
      isDisabled.value = false;
    }
  }, 1000);

  isDisabled.value = true;
};

//  判断手机号是否合法
const isPhoneValid = computed(() => {
  const phone = params.value.phone;
  // 正则：以1开头的11位数字
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone);
});
</script>

<style lang="scss" scoped>
.resetPassword {
  background-color:#9897FE;
  width: 100vw;
  height: 100vh;
  position: relative;
  .head {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
  .content {
    position: absolute;
    top: 150rpx;
    width: 87%;
    left: 50rpx;
    height: 61%; // 控制最大宽度
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    background-color: #A0C0FE;
    border-radius: 40rpx;
    box-sizing: border-box;
    .title {
      text-align: center;
      padding: 20rpx 0;
      height: 80rpx;
      background-color: #d5d8ff;
      border-top-left-radius: 40rpx;
      border-top-right-radius: 40rpx;
      line-height: 80rpx;
      color: #1a195a;
      font-weight: 500;
    }

    //验证码
    .security {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      input {
        margin-top: 10rpx;
        width: calc(100% - 350rpx); /* 留出右边空间 */
        height: 80rpx;
        background-color: #fff;
        border-radius: 40rpx;
        padding-left: 50rpx;
        padding-right: 300rpx;
      }
      .code {
        position: absolute;
        left: 330rpx;
        top: 39rpx;
      }
    }
    .content-item {
      padding: 0 20rpx;
      .ipt {
        padding: 0 40rpx;
        margin-top: 20rpx;
        input {
          margin-top: 10rpx;
          width: calc(100% - 50rpx);
          height: 100rpx;
          background-color: #fff;
          border-radius: 40rpx;
          padding-left: 50rpx;
        }
      }
      .login {
        margin-top: 48rpx;
        background-color:#5756B3;
        color: #fff;
        border-radius: 40rpx;
        height: 100rpx;
        width: 517rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
